<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Aprendiendo jQuery</title>
		<script src="jquery-1.8.3.min.js"> </script>
		
		<script type="text/javascript">
			function ejData(){
				$(document).on('ready', function(){
					$('.btAsignar').on('click', function(){
						//Asignamos un atributo data 
						$('ol li').each(function(i,elem){
							$.data(elem, 'pos', i);
						});
					});
					
					$('.btMostrar').on('click', function(){
						//Recuperamos los data asignados
						$('ol li').each(function(i,elem){
							alert($.data(elem, 'pos'));
						});
					});

					$('.btLimpiar').on('click', function(){
						//Asignamos un atributo data 
						$('ol li').each(function(i,elem){
							$.data(elem, 'pos', null);
						});
					});
					
				});
			}
		</script>
		<style>
			
		</style>
	</head> 
	<body>
		<button class="btAsignar btejemplo">Asignar</button>
		<button class="btMostrar btejemplo">Mostrar</button>
		<button class="btLimpiar btejemplo">Limpiar</button>
		<div class="jq-nav ejemplos">
			<ol>
				<li>Primero</li>
				<li>Segundo</li>
				<li>Tercero</li>
			</ol>
		</div><br>
		<!--<script type="text/javascript" src="http://www.rfsouto.com/Scripts/capitulo12.js"></script>-->
		<script type="text/javascript">
		<!--
		ejData();
		//--></script>
	</body>
</html>